/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 短信/云呼管理 => 短信模版审核
 *  */
import React, { useMemo, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import styles from './index.less';

import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import TemSensitive from './components/TemSensitive';
import TemReject from './components/TemReject';
import TemRejectSvip from './components/TemRejectSvip';
import TemApprove from './components/TemApprove';
import TemApproveSvip from './components/TemApproveSvip';
import SignAudit from './components/SignAudit';
import SignApprove from './components/SignApprove';
import SignReject from './components/SignReject';
import TemAudit from './components/TemAudit';
import TemAuditSvip from './components/TemAuditSvip';
import RedPoint from '@/components/_pages/red-point';

interface IndexType {
  winSize: string;
}

const TemplateAuditIndex = (props: IndexType) => {
  const { winSize } = props;
  const [activeKey, setActiveKey] = useState('1');
  const handleTabChange = (key: string) => setActiveKey(key);
  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);
  const tabList = useMemo(
    () => [
      {
        tab: <RedPoint type='0'>待审核模版</RedPoint>,
        key: '1',
        child: <TemAudit screenSize={screenSize} pageKey={'1'} show={activeKey == '1'} />,
      },
      {
        tab: '敏感待审核模版',
        key: '8',
        child: <TemSensitive screenSize={screenSize} pageKey={'8'} show={activeKey == '8'} />,
      },
      {
        tab: '已通过模版',
        key: '2',
        child: <TemApprove screenSize={screenSize} pageKey={'2'} show={activeKey == '2'} />,
      },
      {
        tab: '已拒绝模版',
        key: '3',
        child: <TemReject screenSize={screenSize} pageKey={'3'} show={activeKey == '3'} />,
      },
      {
        tab: '待审核签名',
        key: '9',
        child: <SignAudit screenSize={screenSize} pageKey={'9'} show={activeKey == '9'} />,
      },
      {
        tab: '已通过签名',
        key: '10',
        child: <SignApprove screenSize={screenSize} pageKey={'10'} show={activeKey == '10'} />,
      },
      {
        tab: '已拒绝签名',
        key: '11',
        child: <SignReject screenSize={screenSize} pageKey={'11'} show={activeKey == '11'} />,
      },
      {
        tab: '待审核超V信息',
        key: '12',
        child: <TemAuditSvip screenSize={screenSize} pageKey={'12'} show={activeKey == '12'} />,
      },
      {
        tab: '已通过超V信息',
        key: '13',
        child: <TemApproveSvip screenSize={screenSize} pageKey={'13'} show={activeKey == '13'} />,
      },
      {
        tab: '已拒绝超V信息',
        key: '14',
        child: <TemRejectSvip screenSize={screenSize} pageKey={'14'} show={activeKey == '14'} />,
      },
    ],
    [activeKey, screenSize],
  );

  return (
    <PageContainer className={styles.main}>
      <Tabs onChange={handleTabChange} type='card' activeKey={activeKey}>
        {tabList.map(({ child, ...rest }) => (
          <TabPane key={rest.key} tab={rest.tab} forceRender>
            {child}
          </TabPane>
        ))}
      </Tabs>
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(TemplateAuditIndex));
